﻿<!DOCTYPE html>
<html>

<head id="Head1" runat="server">
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  <title>月度交付情况</title>
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1" />
  <link rel="Shortcut Icon" href="../images/tempoBI.ico" type="image/x-icon" />
  <link rel="stylesheet" href="../StaticFiles/layui/dist/css/layui.css" />
  <link rel="stylesheet" href="../StaticFiles/layui/admin.css" />
  <script type="text/javascript" src="../Scripts/json2.js"></script>
  <script type="text/javascript" src="../Scripts/jquery-1.11.2.min.js"></script>
  <style type="text/css">
    html {
      background-image: url(../images/bg.jpg);
      background-repeat: no-repeat;
    }

    #header {
      height: 60px;
      background-image: url(../images/抬头.png);
      background-size: 100% 60px;
      background-repeat: no-repeat;
      color: #fff;
      font-weight: bold;
      text-align: center;
      font-size: 28px;
      line-height: 60px;
    }

    #title {
      color: #fff;
      font-family: '微软雅黑';
      font-size: 20px;
      font-weight: bold;
      height: 32px;
      line-height: 32px;
    }

    .layui-card {
      background-color: transparent;
      border: 1px dashed #1E9FFF;
    }

    .layui-card-header {
      color: #fff;
      border: none;
      text-align: center;
      font-size: 20px;
      font-weight: bold;
      letter-spacing: 0.1em;
    }

    /*左上图片*/
    .bg-left-top {
      position: absolute;
      left: -2px;
      top: -2px;
      width: 25px;
      height: 25px;
      background-image: url(../images/left-top.png);
    }

    /*左下图片*/
    .bg-left-bottom {
      position: absolute;
      left: -2px;
      bottom: -2px;
      width: 25px;
      height: 25px;
      background-image: url(../images/left-bottom.png);
    }

    /*右上图片*/
    .bg-right-top {
      position: absolute;
      right: -2px;
      top: -2px;
      width: 25px;
      height: 25px;
      background-image: url(../images/right-top.png);
    }

    /*右下图片*/
    .bg-right-bottom {
      position: absolute;
      bottom: -2px;
      right: -2px;
      width: 25px;
      height: 25px;
      background-image: url(../images/right-bottom.png);
    }

    .layui-table-cell {
      text-align: center;
      color: #fff;
    }

    .layui-table {
      background-color: transparent !important;
    }

    .layui-table-view {
      margin-top: 0px;
    }

    .layui-table-header {
      background-color: transparent !important;
    }

    .layui-table-header .layui-table-cell {
      color: rgb(60, 176, 255);
      font-size: 16px;
      font-family: '微软雅黑';
      font-weight: bold;
    }

    .layui-table tr:hover {
      background-color: transparent !important;
    }

    .layui-table thead tr {
      background-color: transparent !important;
    }

    .layui-laypage a,
    .layui-laypage span {
      color: #fff;
    }

    .layui-laypage .layui-laypage-skip {
      color: #fff;
    }
  </style>
</head>

<body>
  <div class="layui-row" style="padding: 0 15px;">
    <div class="layui-col-md12">
      <div id="header">
      </div>
    </div>
  </div>

  <div class="layui-fluid" style="padding-bottom: 0px;">
    <div class="layui-row layui-col-space15">
      <div class="layui-col-md12">
        <table class="layui-table" id="grid" lay-data="{}" lay-filter="grid">
        </table>
      </div>
    </div>
  </div>

  <script src="../Scripts/echarts/echarts-5.4.0.min.js"></script>
  <script type="text/javascript" src="../StaticFiles/layui/dist/layui.js"></script>
  <script type="text/javascript">
    $(function () {

      $(".layui-card:last-child").css({ "marginBottom": "0px" });
      function getUrlParam(name) {
        var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)"); //构造一个含有目标参数的正则表达式对象
        var r = window.location.search.substr(1).match(reg);  //匹配目标参数
        if (r != null) return unescape(r[2]); return null; //返回参数值
      };
      var $factoryid = getUrlParam('factoryid');

      $("#header").text(decodeURIComponent(layui.url().search.month) + '月交付情况');
      document.title = layui.url().search.month + "月交付情况";

      layui.use(['layer', 'table'], function () {
        var table = layui.table;
        var layer = layui.layer;
        function GetDealFaultBillDetail() {
          table.render({
            elem: '#grid'
            , url: '../data/monthDeliveryData.json'
            , method: 'GET'
            , page: false
            , cols: [[
              { type: 'numbers', title: '序号', width: 60 }
              , { field: 'ordertype', title: '订单类型' }
              , { field: 'mfgordername', title: '订单号' }
              , { field: 'engineno', title: '发动机号' }
              , {
                field: 'status', title: '完工状态',
                templet: function (d) {
                  if (d.status === '已完工') {
                    return '<span style="background:#00ff00;color:#000;padding:5px 10px;border:1px solid #00ff00;border-radius:3px;">' + d.status + '</span>';
                  } else {
                    return '<span style="background:#ff0000;color:#fff;padding:5px 10px;border:1px solid #ff0000;border-radius:3px;">' + d.status + '</span>';
                  }
                }
              }
              , { field: 'finishdate', title: '完工时间' }
            ]]
          });
        };
        GetDealFaultBillDetail();
      });
    });
  </script>
</body>

</html>